{extend name="layout/layout"}
{block name="content"}
<link rel="stylesheet" href="__ROOT__/public/activity/css/layui-vue.css"/>
<script type="text/javascript" src="__ROOT__/public/activity/js/vue3.js?at={:date('his')}"></script>
<script type="text/javascript" src="__ROOT__/public/activity/js/layui-vue.js?at={:date('his')}"></script>
<style>
    #info-page .layui-input {
        padding: 0
    }
    #info-page .layui-input-suffix,.layui-input-prefix{
        transform: translate(0, 0);
        position: initial;
    }
    .layui-tree *{
        box-sizing: content-box;
    }
    .layui-laydate .layui-this {
        background-color:#F97A28!important
    }
</style>

<main id="info-page" >
    <div class="head_a1">
        <div class="layui-main" >
            <div class="b1">
                <div class="t1">步驟一：活動資訊( 活動類別 )</div>
                <a href="/" class="back_btn"><img src="__ROOT__/public/activity/images/out.png">返回首页</a>
            </div>
        </div>
    </div>
    <div class="main_a">
        <div class="layui-main" style="margin:20px auto">
            <div class="active_w active6 ">
                <p class="text-align-center ft18 mb40 ft-bold">開始建立活動資訊！</p>

                <lay-upload url="/api/upload" field="file" @done="doneHandle">

                    <div class="layui-upload-drag mb80" id="ID-upload-demo-drag">
                        <div v-if="!uploadImgUrl" class="b1">
                            <i class="layui-icon layui-icon-upload"></i>
                            <div>就缺一張好看的活動照請上傳 1080 X 540 pixel 且小於4MB</div>
                        </div>
                        <div v-else class="img_box">
                            <img :src="uploadImgUrl" alt="上传成功后渲染">
                        </div>

                    </div>
                </lay-upload>
                <div class="layui-form">
                    
                    <div class="layui-form-item">
                        <div class="label must">主辦單位名稱</div>
                        <p class=" tip1 label">若首次创建活动，请先返回首页>>点击个人头像>>主办中心>>主办管理>>建立新主办</p>
                        <lay-select  v-model="form.organizer_name" style="border:none">
                          
                            <lay-select-option v-for="item in organizer" :value="item.name" :label="item.name"></lay-select-option>
                          
                        </lay-select>
                    </div>
                    <div class="layui-form-item">
                        <div class="label must">活動名稱
                        </div>
                        <div class="">
                            <lay-input placeholder="请填写活動名稱"  v-model="form.name"></lay-input>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="label must">活動時間<p class=" tip1">開始時間</p>
                        </div>
                        <div class="d-flex">
                            <lay-date-picker v-model="form.begin_time" type="datetime"
                                             placeholder="请选择开始时间"></lay-date-picker>
                        </div>
                        <p class=" tip1 mb10">結束時間</p>
                        <div class="d-flex">
                            <lay-date-picker v-model="form.end_time" type="datetime"
                                             placeholder="请选择結束时间"></lay-date-picker>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="label must">活動地點</p>
                        </div>
                        <div class="">
                            <div class="mb12">
                                <lay-tree-select v-model="form.region_id" :data="region" placeholder="请选择活动地点"></lay-tree-select>
                            </div>
                            <lay-input placeholder="请填写详细地址"  v-model="form.address_detail"></lay-input>
                        </div>
                    </div>
                </div>

                <div class="mt100 d-flex jc-s al-c">
                    <a href="/activity/create/type.html" class="last-btn">
                        <img src="__ROOT__/public/activity/images/out1.png">返回上一步
                    </a>
                    <a href="javascript:;" @click="goNext()">
                        <button class="layui-btn layui-bg-orange next-btn">下一步</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    const App = {
        data() {
            return {
                uploadImgUrl: null,
                form: {},
                region:[],
                organizer : []
            };
        },
        methods: {
            doneHandle(res) {
                const ret = JSON.parse(res.data)
                if (ret.code === 1) {
                    this.uploadImgUrl = ret.data.url;
                } else {
                    layui.layer.msg(ret.info, {icon: 2});
                }
            },
            goNext() {
                this.form.logo = this.uploadImgUrl;
                var data = {};
               for(var k in this.form){
                   data[k]= this.form[k]
               }
                $.quickPost('{:url("/activity/create/info")}',data).done(res => {
                    location.href = '/activity/create/content.html';
                });
            }
        },
        computed() {

        },
        mounted() {
            this.region=JSON.parse('{:json_encode($regionList)}');
            this.form = JSON.parse('{:json_encode($vo)}');
            this.organizer = JSON.parse('{:json_encode($organizer)}');
            this.form.region_id = Number(this.form.region_id)
            this.uploadImgUrl = this.form.logo;
        },
    };
    const app = Vue.createApp(App);
    app.use(LayuiVue);
    app.mount("#info-page");
</script>
{/block}